<template>
  <!-- <div class="chatbot-container">
    <!-- 悬浮球按钮，点击跳转到Ai.vue页面 -->
    <!-- `<div class="chatbot-floating-btn" @click="navigateToAiPage">
      <van-icon name="chat-o" size="28" />`
    </div>
  </div> -->
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateToAiPage = () => {
  // 跳转到Ai.vue页面
  router.push('/ai')
}
</script>

<style scoped>
.chatbot-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 悬浮球按钮样式 - 确保在手机框内部正确显示 */
.chatbot-floating-btn {
  position: absolute;
  bottom: 30px;
  right: 20px;
  width: 56px;
  height: 56px;
  background-color: #07c160;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 100;
  animation: pulse 2s infinite;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.chatbot-floating-btn:active {
  transform: scale(0.95);
}

@keyframes pulse {
  0% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 6px 16px rgba(7, 193, 96, 0.4);
  }
  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}
</style>